<template>
  <div id="lvqstrategy">
    <el-steps :active=2 simple style="margin-bottom: 10px">
      <el-step title="简介" icon="el-icon-info"></el-step>
      <el-step title="上传" icon="el-icon-upload2"></el-step>
      <el-step title="策略及参数" icon="el-icon-setting"></el-step>
      <el-step title="结果及可视化" icon="el-icon-finished"></el-step>
    </el-steps>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column v-for="(data,index) in tableData[0]" :prop="index" :key="index">
        <template slot="header" slot-scope="scope">
          <el-switch
            v-model="isUse[index]"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          <el-radio v-model="radio" :label="index" @change="radioChange">label？</el-radio>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="丢失值处理">
        <el-select v-model="pre" placeholder="默认忽略元组">
          <el-option label="忽略元组" value="0"></el-option>
          <el-option label="中位数" value="1"></el-option>
          <el-option label="平均值" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学习率η">
        <el-input placehoder="设置η值" v-model="eta" clearable></el-input>
      </el-form-item>
      <el-form-item label="迭代次数iter">
        <el-input placehoder="设置iter值" v-model="iter" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="firstSubmit">提交参数</el-button>
      </el-form-item>
    </el-form>
    <div v-show="firstFinish">
      <el-divider></el-divider>
      <el-col :span="24">
        <el-row>
          <el-col :span="8">
            <el-table :data="labelData">
              <el-table-column prop="name" label="标签名">
              </el-table-column>
              <el-table-column prop="num" label="数量">
              </el-table-column>
              <el-table-column label="加入队列">
                <template slot-scope="scope">
                  <el-button size="mini" @click="addList(scope.row)">加入</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="2">
            <el-divider direction="vertical"></el-divider>
          </el-col>
          <el-col :span="8">
            <el-table :data="tList">
              <el-table-column prop="name" label="标签名">
              </el-table-column>
              <el-table-column label="移除队列">
                <template slot-scope="scope">
                  <el-button size="mini" @click="removeList(scope.$index)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="2">
            <el-divider direction="vertical"></el-divider>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="runCluster">开始聚类</el-button>
          </el-col>
        </el-row>
      </el-col>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "LVQStrategy",
  data() {
    return {
      isUse: {
        c0: true,
        c1: true,
        c2: true,
        c3: true,
        c4: true,
        c5: true,
        c6: true,
        c7: true,
        c8: true,
        c9: true,
        c10: true,
        c11: true,
        c12: true,
        c13: true,
        c14: true,
        c15: true,
        c16: true,
        c17: true,
        c18: true,
        c19: true
      },
      tableData: [],
      tList: [],
      labelData: [],
      radio: "",
      eta: "",
      pre: "0",
      iter: "",
      use: [],
      firstFinish: false
    }
  },
  methods: {
    radioChange() {
      for (let useKey in this.isUse) {
        this.isUse[useKey] = true
      }
      this.isUse[this.radio] = false
    },
    firstSubmit() {
      var hasChar = false;
      var eta = parseFloat(this.eta);
      var tmpIF = parseFloat(this.iter);
      var tmpII = parseInt(this.iter);
      for (let key in this.tableData[0]) {
        if (this.isUse[key]) {
          if (this.tableData[0][key][0] > '9' || this.tableData[0][key][0] < '0') {
            hasChar = true;
          }
          this.use.push(key)
        }
      }
      if (this.use.length == 0) {
        this.$notify({
          title: '没有参与聚类的数据',
          message: "至少选择一列数据",
          type: "error"
        })
      } else if (hasChar) {
        this.$notify({
          title: '存在离散型数据',
          message: "目前仅支持连续性数据",
          type: "warning"
        })
      } else if (this.radio == "") {
        this.$notify({
          title: '没有设置聚类的标签',
          message: "点击表格上方单选框",
          type: "error"
        })
      } else if (this.eta == "") {
        this.$notify({
          title: '没有设置η',
          message: "请设置η为正数",
          type: "error"
        })
      } else if (this.iter == "") {
        this.$notify({
          title: '没有设置iter',
          message: "请设置iter为正整数（最好大一点）",
          type: "error"
        })
      } else if (tmpII != tmpIF || tmpII < 1) {
        this.$notify({
          title: '输入的iter不符规定',
          message: "请设置iter为正整数（最好大一点）",
          type: "error"
        })
      } else if (eta <= 0) {
        this.$notify({
          title: '输入的η不符规定',
          message: "请设置η为正数",
          type: "error"
        })
      } else {
        this.use.push(this.radio)
        var that = this
        axios.post("http://localhost:8080/lvq/strategy?pre=" + this.pre).then(
          function (response) {
            console.log(response.data)
          }, function (err) {
          })
        axios.post("http://localhost:8080/lvq/params?eta=" + this.eta + "&iter=" + this.iter).then(
          function (response) {
            console.log(response.data)
          }, function (err) {
          })
        axios.post("http://localhost:8080/lvq/columns?cols=" + this.use).then(
          function (response) {
            that.getLabels();
            that.firstFinish = true
          }, function (err) {
          })
      }
      this.use = []
    },
    addList(row) {
      this.tList.push({name: row.name})
    },
    removeList(index) {
      this.tList.splice(index, 1)
    },
    getLabels() {
      var that = this;
      axios.get("http://localhost:8080/lvq/labels").then(
        function (response) {
          that.labelData = response.data
        }, function (err) {
        })
    },
    runCluster() {
      var nameList = []
      for (let i = 0; i < this.tList.length; i++) {
        nameList[i] = this.tList[i].name
      }
      axios.post("http://localhost:8080/lvq/labellist?list=" + nameList).then(
        function (response) {
          location.replace("#/lvq/do")
        }, function (err) {
        })
    }
  },
  mounted() {
    var that = this;
    axios.post("http://localhost:8080/lvq/preview").then(
      function (response) {
        that.tableData = response.data;
      }, function (err) {
      })
  }
}
</script>

<style scoped>
.el-divider--vertical {
  display: inline-block;
  height: 100%;
  vertical-align: center;
  position: relative;
}
</style>
